<template>
		<view class="white_bg"  >
			<!-- 历史轨迹 -->
			<view class="horizontal" style="justify-content: space-between;" @click.stop="$emit('toHistoryRouteList')">
				<view class="horizontal" style="margin-left: 16px;">
					<image class="small_icon"
						src="@appstatic/car/car_history_route_icon.png"
						mode='widthFix' />
					<view class="history-text-3" style="margin-left: 10rpx ">{{historyRouteName}}</view>
				</view>
				<image class="arrow" style="margin-right: 16px;"
					src="@appstatic/community/activity_right_arrow.png" />
			</view>
			<!-- 起止时间 -->
			<view @click.stop="$emit('toHistoryRoute')">
				<!-- 结束时间 -->
				<view class="horizontal">
					<view class="dot-line-view">
						<view class="date-line" style="border-left: 1px dashed #00000000;"></view>
						<image class="small_icon2"
							src="@appstatic/car/car_blue_dot.png" />
						<view class="date-line"></view>
					</view>
					<view class="history-text-2">
						{{endTime}}</view>
					<view class="history-text-1" style="">{{endAddress}}</view>
				</view>
				<!-- 开始时间 -->
				<view class="horizontal">
					<view class="dot-line-view">
						<view class="date-line"></view>
						<image class="small_icon2"
							src="@appstatic/car/car_orange_dot.png" />
						<view class="date-line" style="border-left: 1px dashed #00000000;"></view>
					</view>
					<view class="history-text-2">
						{{startTime}}</view>
					<view class="history-text-1">
						{{startAddress}}</view>
				</view>
			</view>
			
			<view class="horizontal-divide" v-if="model!='首页'">
				<view class="horizontal-divide_view"  >
					<view class="horizontal"  >
						<image class="small_icon"
							src="@appstatic/car/car_total_mileage_icon.png" />
						<view class="history-text-4" style=" margin-left: 10rpx ">里程 km</view>
					</view>
					<view class="history-text-5" style="margin-top: 5px;"> {{mileage}}
					</view>
				</view>
			
				<view class="horizontal-divide_view" >
					<view class="horizontal"  >
						<image class="small_icon"
							src="@appstatic/car/history_time_icon.png" />
						<view class="history-text-4" style=" margin-left: 10rpx ">时长 min</view>
					</view>
					<view class="history-text-5" style="margin-top: 5px;"> {{time}}
					</view>
				</view>
			
				<view class="horizontal-divide_view" >
					<view class="horizontal"  >
						<image class="small_icon"
							src="@appstatic/car/history_speed_icon.png" />
						<view class="history-text-4" style=" margin-left: 10rpx ">时速 km/h</view>
					</view>
					<view class="history-text-5" style="margin-top: 5px;"> {{speed}}
					</view>
				</view>
			
				 
			</view>
			
		</view>
</template>

<script>
	export default {
		name:"historyRouteView",
		props: {
			startTime: {
				type: String,
				default: ""
			},
			endTime: {
				type: String,
				default: ""
			},
			startAddress: {
				type: String,
				default: ""
			},
			endAddress: {
				type: String,
				default: ""
			},
			mileage: {
				type: String,
				default: ""
			},
			time: {
				type: String,
				default: ""
			},
			speed: {
				type: String,
				default: ""
			},
			model:{
				type: String,
				default: ""
			},
			historyRouteName:{
				type: String,
				default: "历史轨迹"
			},
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.white_bg {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 16px;
		padding-bottom: 16px;
		gap: 8px;
		background: #FFFFFF;
		border-radius: 4px;
	}
	.horizontal {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.small_icon {
		width: 16px;
		height: 16px;
	}
	.history-text-3 {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 600;
		font-size: 13px;
		line-height: 19px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
	}
	.arrow {
		width: 15px;
		height: 13px;
		align-self: center;
	}
	.dot-line-view {
		display: flex;
		flex-direction: column;
		margin-left: 22px;
	}
	.date-line {
		border-left: 1px dashed #ADB0AE;
		margin-left: 2px;
		height: 16px;
		width: 1px;
	}
	.small_icon2 {
		width: 6px;
		height: 6px;
	}
	
	.history-text-1 {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 19px;
		display: flex;
		align-items: center;
		color: #ADB0AE;
		margin-left: 12px;
		width: calc(100% - 105px);
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 1; //文字上限行
		-webkit-box-orient: vertical;
	}
	
	.history-text-2 {
		width: 33px;
		margin-right: ;
		font-family: 'Arial';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 15px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
		margin-left: 15px;
	}
	

	.history-text-4{
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 97.5%;
		text-align: center;
		color: #ADB0AE;
	}
	.history-text-5{
		font-family: 'Arial';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 100%;
		text-align: right;
		color: #3D3A3A;
	}
	.horizontal-divide {
		width: calc(100% - 32px);
		display: flex;
		flex-direction: row;
		/* justify-content: start; */
		margin-bottom: 15px;
		margin-left: 16px;
		margin-right: 16px;
	}
	.horizontal-divide_view {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 33%;
	}
</style>